لا تكرّر نفسك (DRY): أعد استخدام دوال Sass التي كتبتها

مبدأ “لا تكرّر نفسك” (Don’t Repeat Yourself – DRY) هو أحد المبادئ الأساسية في هندسة البرمجيات والذي يهدف إلى تقليل التكرار في الشيفرة البرمجية وزيادة قابليتها لإعادة الاستخدام، مما يؤدي إلى تقليل الأخطاء وتسهيل الصيانة. وعندما ننتقل إلى عالم تطوير الواجهات باستخدام أدوات مثل Sass (Syntactically Awesome Stylesheets)، يصبح تطبيق هذا المبدأ ضرورة وليس اختياراً، خاصة عند كتابة ملفات أنماط CSS للمشاريع الكبيرة والمتنامية.

Sass هو امتداد للغة CSS يتيح استخدام ميزات برمجية مثل المتغيرات، التوابع (Functions)، المزج (Mixins)، والحلقات، ما يجعل تنظيم الشيفرة وتحقيق مبدأ DRY أمراً أكثر فاعلية وسلاسة. في هذا المقال، سنستعرض بشكل معمق كيف يمكن استغلال دوال Sass لتعزيز مبدأ DRY داخل ملفات الأنماط، مع توضيحٍ تفصيلي لمزايا، تقنيات، وأمثلة تطبيقية لذلك.

مفهوم مبدأ DRY في بيئة Sass

يعني مبدأ DRY أن تتجنب تكرار نفس الشيفرة أو المنطق في أكثر من موضع. فإذا وجدت نفسك تكرر نفس القيمة أو الكود عبر عدة أماكن في مشروعك، فاعلم أنك بحاجة إلى إعادة تنظيم. في Sass، يُترجم هذا من خلال تعريف توابع ودوال ومزج يعاد استخدامها مرارًا وتكرارًا في أجزاء متعددة من المشروع دون الحاجة إلى نسخ الشيفرة يدوياً.

مثال توضيحي:

scss
CopyEdit
// قبل تطبيق DRY
.button-primary {
  color: white;
  background-color: #007BFF;
  border: 1px solid #007BFF;
}

.button-secondary {
  color: white;
  background-color: #6C757D;
  border: 1px solid #6C757D;
}

في المثال أعلاه، نلاحظ تكرار واضح للصيغة والهيكل، ما يمكن إعادة تنظيمه باستخدام Mixin أو Function.

دوال Sass ودورها في تحقيق DRY

ما هي دوال Sass؟

الدوال في Sass تشبه إلى حد كبير الدوال في لغات البرمجة الأخرى. فهي تسمح بتعريف منطق معين يُرجع قيمة يمكن استخدامها داخل ملف الأنماط. الهدف الرئيسي منها هو إجراء عمليات حسابية، تحويلات لونية، أو حتى إنشاء قواعد نمطية قابلة لإعادة الاستخدام.

الهيكل العام لدالة Sass:

scss
CopyEdit
@function اسم-الدالة($وسائط...) {
  @return قيمة-الناتج;
}

مثال عملي:

scss
CopyEdit
@function px-to-rem($px, $base: 16) {
  @return ($px / $base) * 1rem;
}

// استخدام الدالة
body {
  font-size: px-to-rem(18);
}

في هذا المثال، تم إنشاء دالة لتحويل القيم من بيكسل إلى ريم، وهي تقنية شائعة لضمان توافق التصميم مع مختلف أحجام الشاشات. بدلاً من تكرار عملية التحويل يدوياً كل مرة، يمكن الآن استخدام الدالة في كل مكان في المشروع.

استخدام الدوال مع المتغيرات لتقليل التكرار

أحد أقوى الأساليب في Sass هو الجمع بين المتغيرات والدوال لتعزيز قابلية التوسع والتعديل. فبدلاً من كتابة القيم الصريحة بشكل متكرر، يمكن استخدام المتغيرات، وإنشاء دوال لتوليد الأنماط منها.

مثال متقدم:

scss
CopyEdit
$primary-color: #3498db;
$secondary-color: #2ecc71;

@function generate-button($color) {
  @return (
    background-color: $color,
    border: 1px solid darken($color, 10%),
    color: white
  );
}

.button-primary {
  @each $prop, $value in generate-button($primary-color) {
    #{$prop}: $value;
  }
}

.button-secondary {
  @each $prop, $value in generate-button($secondary-color) {
    #{$prop}: $value;
  }
}

هذه التقنية تسمح بإعادة استخدام منطق التصميم بشكل ديناميكي بناءً على لون مختلف، مما يقلل التكرار ويزيد من التحكم في المظهر العام للموقع.

مقارنة بين الدوال والمزج (Mixins)

على الرغم من التشابه بين Mixins والدوال، إلا أن لكلٍ منهما استخدامات محددة:

توصية عامة: استخدم الدوال للحسابات والقيم الديناميكية، والمزج عندما تحتاج إلى توليد مجموعة خصائص CSS.

استراتيجيات إعادة استخدام الدوال في مشاريع Sass

1. تنظيم الدوال في ملفات مستقلة

من الأفضل دائمًا وضع جميع الدوال في ملف خاص، وليكن functions.scss، واستدعاؤه عبر نظام الاستيراد في Sass. هذا يسهل التعديل والتحديث.

scss
CopyEdit
// _functions.scss
@function spacing($unit) {
  @return $unit * 8px;
}

// main.scss
@use 'functions' as *;

.container {
  padding: spacing(2);
}

2. تجميع المكتبة الخاصة بك من الدوال

كلما كبر المشروع، ازدادت الحاجة إلى بناء مكتبة خاصة تحتوي على دوال جاهزة لمعالجة الألوان، المساحات، الخطوط، التحجيم، وغيرها.

scss
CopyEdit
// مثال دالة معالجة لون الشفافية
@function transparentize-color($color, $amount: 0.5) {
  @return rgba($color, 1 - $amount);
}

أفضل الممارسات عند كتابة دوال Sass

1. الوضوح في التسمية: اختر أسماء وصفية للدوال تعبر عن وظيفتها.

2. عدم الإفراط في التعقيد: اجعل الدوال بسيطة وواضحة في منطقها.

3. استخدم القيم الافتراضية للوسائط: لتوفير مرونة أكبر في الاستخدام.

4. تجنب التأثيرات الجانبية: يجب أن تكون الدوال نقية (Pure Functions)، أي أنها لا تؤثر على المتغيرات الخارجية ولا تعتمد على حالتها.

أمثلة تطبيقية لدوال مفيدة في Sass

دالة توليد ظل:

scss
CopyEdit
@function generate-shadow($x: 0px, $y: 2px, $blur: 5px, $color: rgba(0, 0, 0, 0.15)) {
  @return $x $y $blur $color;
}

.card {
  box-shadow: generate-shadow();
}

دالة لحساب النسبة المئوية:

scss
CopyEdit
@function percentage($part, $whole) {
  @return ($part / $whole) * 100%;
}

.progress {
  width: percentage(75, 100); // 75%
}

دالة لتقليص الحجم:

scss
CopyEdit
@function shrink($value, $factor) {
  @return $value * (1 - $factor);
}

.image {
  width: shrink(300px, 0.2); // 240px
}

جدول: مقارنة دوال Sass حسب نوع الاستخدام

فوائد إعادة استخدام الدوال في مشاريع Sass

• سهولة الصيانة: تعديل قيمة في دالة واحدة ينعكس على كل الأماكن المستخدمة لها.

• تقليل التكرار: يقلل من تكرار الأكواد ويزيد من الاتساق في التصميم.

• مرونة التعديل: يسمح بتحديث سهل لاستراتيجية التصميم دون الحاجة لتعديلات يدوية كثيرة.

• تحسين الأداء والتنظيم: الكود يصبح أكثر نظافة وسهولة في القراءة والتحليل.

• تعزيز التعاون الجماعي: فريق التطوير يمكنه فهم واستيعاب منطق التصميم من خلال مراجعة الدوال المركزية.

الخلاصة

عند كتابة الشيفرات باستخدام Sass، فإن اعتماد مبدأ “لا تكرّر نفسك” من خلال إعادة استخدام الدوال هو ما يميز المشروع المنظم القابل للصيانة عن المشروع العشوائي القابل للانهيار. الدوال ليست مجرد وسيلة تجميلية أو اختصارية، بل هي وسيلة منهجية لتحسين البنية العامة للكود وتطبيق استراتيجيات التصميم الذكي.

إن استثمار الوقت في بناء مكتبة دوال شاملة وقابلة لإعادة الاستخدام سيكون له أثر بالغ على جودة وسرعة تطوير الواجهات. ومع توسع المشروع وتعدد الفرق والمراحل، يصبح هذا النهج ليس فقط مفيدًا، بل أساسيًا لضمان النجاح واستدامة الكود على المدى الطويل.

المراجع:

• Sass Official Documentation: https://sass-lang.com/documentation/

• Maintainable CSS with Sass – Smashing Magazine: https://www.smashingmagazine.com/2015/07/maintainable-css-with-sass/